<%--
  Created by IntelliJ IDEA.
  User: Cc
  Date: 2020/12/30
  Time: 16:51
  To change this template use File | Settings | File Templates.
--%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" +
            request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="shortcut icon" href="/static/favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="/static/css/font.css">
    <link rel="stylesheet" href="/static/css/xadmin.css">
    <link rel="stylesheet" href="/static/css/bootstrap.css">
    <script type="text/javascript" src="/static/js/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="/static/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="/static/js/jqPaginator.js"></script>
    <script type="text/javascript" src="/static/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/static/js/xadmin.js"></script>

</head>

<body>
<div class="x-nav">
      <span class="layui-breadcrumb">
        <a href="#">部门列表</a>
      </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon" style="line-height:30px">ဂ</i></a>
</div>
<div class="x-body">
    <div class="layui-row">
        <form class="layui-form layui-col-md12 x-so">
            <input type="text" placeholder="请输入部门名称" id="queryDepartment" autocomplete="off" class="layui-input">
            <button class="layui-btn" type="button" onclick="selectdepartment()"><i class="layui-icon">&#xe615;</i></button>
        </form>
    </div>

    <xblock>
        <button class="layui-btn" onclick="x_admin_show('添加信息','/jsp/department-add.jsp',500,450)"><i class="layui-icon"></i>添加
        </button>
        <span class="x-right" style="line-height:40px" id="showTotal">共有数据：1 条</span>
    </xblock>
    <table class="layui-table">
        <thead>
        <tr>
            <th>编号</th>
            <th>部门</th>
            <th>职责</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody id="tab"></tbody>
        <tr>
            <td colspan="8" align="center">
                <ul class="pagination" id="pagination1"></ul>
            </td>
        </tr>
    </table>
</div>
<script type="text/javascript">
    //解决enter问题
    $(document).ready(function enterJudage(e) {
           $(this).keydown(function (e) {
                   if (e.which=="13" && $("#queryDepartment").val()!=''){
                       selectdepartment();
                       return false;
                   }
           })
    })
    //总页数
    let totalPages=0;
    //总条数
    let totalCounts=0;
    //当前页
    let currentPage=0;
    //加载就执行
    $(document).ready(function () {
          //全查
        selectAll(1);
        $("#pagination1").jqPaginator({
            totalPages:totalPages,
            totalCounts:totalCounts,
            currentPage:currentPage,
            //加载按钮
            first:'<li class="first"><a href="javascript:void(0);">首页</a></li>',
            prev:'<li class="prev"><a href="javascript:void(0);">上一页</a></li>',
            next:'<li class="next"><a href="javascript:void(0);">下一页</a></li>',
            last:'<li class="last"><a href="javascript:void(0);">末页</a></li>',
            page:'<li class="page"><a href="javascript:void(0);">{{page}}</a></li>',
            onPageChange:function (number) {
                //当前页面改变就执行的函数
                selectAll(number);
            }
        })

    })

    //全查函数
    function  selectAll(number) {
      $.ajax({
          url:"../department/selectAll",
          type:"post",
          dataType:"json",
          async:false,
          data:{
              pageNum:number,//当前页
              pageSize:2,//每页条数
              departmentName:$("#queryDepartment").val(),
          },
          success:function (data) {
             console.log(data)
              //显示条数
              $("#showTotal").text('共有数据'+data.paging.total);
             //取出返回数据中用户数据
              let departmentlist=data.paging.list;
              if (departmentlist.length>0){
                  totalPages=data.paging.pages;//总页数
                  totalCouns=data.paging.total;//总条数
                  currentPage=data.paging.pageNum;//当前页
                  //数据写在当前页面
                  let str='';
                  for (let i=0;i<departmentlist.length;i++){
                      str+='<tr>'+
                          '<td>'+departmentlist[i].id+'</td>'+
                          '<td>'+departmentlist[i].departmentName+'</td>'+
                          '<td>'+departmentlist[i].departmentDuty+'</td>'+
                          '<td class="td-manage"><button type="button" onclick="updateDepartment(this)"><i class="layui-icon">&#xe642;</button>'+
                          '<button type="button" onclick="deleteDepartment(' + "'" + departmentlist[i].departmentName + "'" + ')" <i class="layui-icon">&#xe640;</i></button></td>'+
                          '</tr>'
                  }
                  $("#tab").html(str);
              }else {
                  //没有数据
                  //没有数据
                  totalPages=1;
                  totalCounts=1;
                  currentPage=1;
                  $("#tab").html('<tr><td colspan="8" align="center">没有用户数据请添加数据</td></tr>');
              }

          },error:function () {
            alert("查询用户失败")
          }
      })
    }

    //模糊查询
    function selectdepartment() {
        selectAll(1);
        //加载按钮
        //给三个 变量赋值
        $("#pagination1").jqPaginator({
            //总页数
            totalPages:totalPages,
            //总条数
            totalCounts:totalCounts,
            //当前页
            currentPage:currentPage,
            //加载按钮
            first:'<li class="first"><a href="javascript:void(0);">首页</a></li>',
            prev:'<li class="prev"><a href="javascript:void(0);">上一页</a></li>',
            next:'<li class="next"><a href="javascript:void(0);">下一页</a></li>',
            last:'<li class="last"><a href="javascript:void(0);">末页</a></li>',
            page:'<li class="page"><a href="javascript:void(0);">{{page}}</a></li>',
            //
            onPageChange:function (number) {
                //当页面一改变就执行的函数
                selectAll(number);
            }
        })
    }
    //删除
    function deleteDepartment(departmentName) {
        if (confirm("确定删除么？")) {
            $.ajax({
                url: "../department/deleteDepartment",
                type: "post",
                dataType: "json",
                data: {
                    "departmentName": departmentName,
                },
                success: function (data) {
                    if (data.code == 200) {
                        location.reload();
                        alert("删除成功")
                    }
                }, error: function () {
                    alert("删除失败!")
                }

            })
        }
    }
    //修改
    function updateDepartment(obj) {
        // 把 DOM对象转换为jQuery对象，获取td标签中的值
        let id = $(obj).parent().parent().find('td').eq(0).text();
        let departmentName = $(obj).parent().parent().find('td').eq(1).text();
        let departmentDuty = $(obj).parent().parent().find('td').eq(2).text();

        localStorage.setItem("departmentId",id);
        localStorage.setItem("departmentName",departmentName);
        localStorage.setItem("departmentDuty",departmentDuty);
        x_admin_show('修改信息','/jsp/department-update.jsp',500,450);
    }

</script>

</body>

</html>